<template >
	<view>
		<view class="" >
			<view class="" style="z-index: -1;position: fixed;" id="bg" :style="{top:top+'px'}">
				<image class="blue" src="http://image-prd.xiaozhuguang.com/oss%2Fbg3.jpg" mode="" style="width: 750rpx;height: 3334rpx;" ></image>
			</view>
			<view  v-show="!iswancheng">
				<view v-if="liuxingshow"  class="star" v-for="item in starCount" :key="item.id"
					  :style="{top:item.top+'px',left:item.left+'px',animationDelay:item.delay+'s'}"></view>
				<!-- 	<image class="liuxing" src="../../static/qifu/liuxing.png" mode="" style="width: 100px;height: 50px;position: fixed;margin:auto;
								left:0;
								right:0;
								">
								</image> -->
				<view class="showkmd" v-show="showkmd">
					<view v-show="!isfangfei&&!iswancheng"  class="" style="width: 375px;height: 100px;position: fixed;margin:0 auto;
				left:0;
				right:0px;
				bottom:190px;display: flex;justify-content: center;">
						<view class="xinyuanbg" style="" >
							<view class="" style="height: 5px;"></view>
							<view style="margin: 20rpx;font-size:30rpx;font-weight: 900;">填写心愿<!-- <text style="font-size: 10px;color: #666;margin-left: 10px;"> 这是第<text style="color: #ff557f;">{{textnum}}</text>盏许愿灯，将由您放飞</text> --></view>
							<view class="cu-form-group margin-top"  style="margin: 11px;align-items: flex-end;display: block;" >
							<textarea style="height: 170rpx;flex: 2;"  maxlength="40"  @input="textareaAInput" v-model="content" placeholder="在这里写下你的心愿吧" >

							</textarea>
								<view class="texttigs" >你还可以输入<text style="color: #ff557f;">{{textnum}}</text>字</view>
							</view>
							<!-- <textarea  placeholder="   在这里写下你的心愿吧" style="background-color: #ffff;margin: auto;"/> -->

							<button @click="fangfei()" shape="circle" color="#fff" type="default" text="放 飞 孔 明 灯"  style="height: 70rpx; margin-top: 10rpx;width: 300rpx;color: #ba4b20;font-weight: 900;"></button>
						</view>
					</view>
					<image  class="kmd color-hex" src="http://image-prd.xiaozhuguang.com/oss%2Fkmd.png" mode="" style="width: 470rpx;height: 514rpx;position: fixed;margin:auto;
							left:0;
							right:0;
							bottom:300px;">

					</image>
					<view  class="kmd color-hex" style="width: 200rpx;height: 480rpx;position: fixed;margin:auto;
							left:0;
							right:0;
							bottom:300px;">
						<view class=" vertical-text">
							<view style="writing-mode: vertical-lr;  word-break: break-all;">
								{{content}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="wancheng" v-show="iswancheng">
			<view  class="" style="width: 300px;height: 120px;position: fixed;margin:0 auto;
			left:0;
			right:0px;
			top: 400rpx;
			background-color: #FFFFFF;border-radius: 20rpx;text-align: center;   background-color: rgba(255,255,255,0.2);">
				<view class="" style="height: 40rpx;"></view>
				<text style="margin-top: 60rpx;opacity: 1;color: #ffdf33;font-weight: 900;font-size: 35rpx;">孔明灯<br>已经飞到很高很高的地方了<br>你的愿望也会实现的 </text>
			</view>

			<view  class="" style="width: 300px;height: 200px;position: fixed;margin:0 auto;
			left:0;
			right:0px;
			top: 670rpx;font-weight: 900;text-align: center;">
				<button @click="zaifangyici" type="" color="#e3774a"  text="再放一次" style="width: 300rpx;"></button>
				<view class="" style="height: 30rpx;"></view>
				<view class="" style="display: flex;">
					<button type="" color="#eccb41" @click="wxshare" text="邀请亲友" style="width: 250rpx;"></button>
					<button @click="openindex()" type="" color="#c0a062"  text="返回小烛光" style="width: 250rpx;"></button>
				</view>
				<view class="" style="height: 40rpx;"></view>
				<image src="../../static/erweima.jpg" mode="" style="width: 200rpx;height: 200rpx;"></image>
				<view class="" style="margin: auto;color: #FFFFFF;">小烛光-温暖温馨的微信纪念馆<br>
					[公众号：小烛光]</view>

			</view>
		</view>


	</view>
</template>

<script>
	import anime from 'animejs'
	var timer = null ; //创建一个定时器
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		name: 'qfd',
		data() {
			return {
				maskshow:false,
				content:null,
				textnum:40,
				iswancheng:false,
				isfangfei:false,
				showkmd:false,
				top:-0,
				loop:true,
				liuxingshow:true,
				animation:'',
				liuxinnum:10,
				animation2:'',
				animationData: {},
				animationData2: {},
				temptop:0,
				isStop:false,
				title: 'Hello',
				starCount:[]
			}
		},
		onLoad() {
			innerAudioContext.src = 'http://image.xiaozhuguang.com/manager/music/f94da50a-c23c-4ec7-9375-7b4bd132f6c2.mp3';
			innerAudioContext.autoplay = true;
			innerAudioContext.loop = true;
			innerAudioContext.play()
		},
		onShow() {
			innerAudioContext.play();
		},
		onReady(){
			let self = this;
			uni.getSystemInfo({
				success: function (res) {
					let width = res.screenWidth
					console.log();
					let imgheight = (width/375)*1667
					self.top =  res.screenHeight - imgheight;
					console.log(self.top)
					console.log(res.screenHeight);
					console.log(res.windowBottom);
					console.log(res.windowTop);
				}
			});
			for(let i =0;i<10;i++){
				//this.liuxinganime()
			}
			self.showkmd = true;
		},
		onUnload(){
			innerAudioContext.destroy()
		},
		methods: {
			bgmove(){
				let self = this;
				this.starCount = [];
				/* 	this.liuxingshow = false; */
				var myAnimation = anime({
					targets: ['.blue'],
					translateY: self.temp,

					easing: 'linear',
					duration: 7000,
					complete: function(anim) {
						/* self.kmdfei(); */
						self.showkmd = true;
						self.showkmdanime();
						console.log("bgmovecomplete")
					}
				});
			},
			setStarCount() { //生成星星的方法
				for(let i = 0; i < 20; i++) { // i < 星星个数
					let star = {} //定义存储一个星星的对象
					let top = parseInt(Math.random()) //定义星星的top值
					console.log(top)
					let left = parseInt(Math.random()*800)  //定义星星的left值
					console.log(left)
					let delay = parseInt(Math.random()*5)  //定义星星的动画延迟时间
					star.id = i
					star.top = top
					star.left = left
					star.delay = delay
					this.starCount.push(star)
				}
			},
			wxshare(){
				this.maskshow = true;
			},
			openindex(){
				console.log("openindex")
				uni.reLaunch({
					url:"/pages/v2/tabbar/index/index"
				})
			},
			back(){
				uni.navigateBack({
					delta: 1
				});
			},
			zaifangyici(){
				location.reload();
			},
			fangfei(){
				if(this.content==null||this.content.length<0){
					uni.$u.toast('请输入心愿')
					return;
				}
				this.isfangfei = true;
				this.getdom();
			},
			showkmdanime(){
				var myAnimation = anime({
					targets: ['.showkmd'],
					opacity:[0.1,1],
					duration: 10000,
				});
			},
			wanshouanime(){
				var myAnimation = anime({
					targets: ['.wancheng'],

					opacity:[0.1,1],

					duration: 10000,

				});
			},
			liuxinganime(){
				console.log("循环了10次")
				anime({
					direction: 'normal',
					targets: ['.star'],
					easing: 'linear',
					delay: function(el,i) {
						return i*500
					},
					scale:[1.2,0.8],
					duration: 5000,
					loop:true,
					keyframes: [
						{ translateX: 0,
							translateY: 0,
							opacity:0,
							duration: 1000,
						},
						{ translateX: -200,
							translateY: 200,
							opacity:1,
							duration: 2000,
						},
						{ translateX: -300,
							translateY: 300,
							opacity:0,
							duration: 2000,
						},
					],


				});
			},
			getdom(){
				let self= this;
				var myAnimation = anime({
					targets: '.blue',
					translateY: -self.top,
					easing: 'linear',
					duration: 10000,
					complete: function(anim) {
						self.kmdfei();
					}
				});
				var myAnimation2 = anime({
					targets: '.kmd',
					loop:this.loop,
					direction: 'alternate',

					rotate: [{
						value: (1),
						direction: '2000',
						easing: 'cubicBezier(.5, .05, .1, .3)',
					},{
						value: (-1),
						direction: '2000',
						easing: 'cubicBezier(.5, .05, .1, .3)',

					}
					],
				})
			},
			kmdfei(){
				let self= this;
				var myAnimation2 = anime({
					targets: ".kmd",
					easing: 'linear',
					translateY:{
						value: '-500',
						duration: 4000,
					},
					complete: function(anim) {
						console.log("完成了");
						self.iswancheng = true;
						self.wanshouanime();

					}

				});
			},
			textareaAInput(e) {
				this.textareaAValue = e.detail.value;
				console.log(this.textareaAValue);
				this.textnum=40 - e.detail.value.length ;
				console.log(this.textnum)
			},

			randomDistance (max, min) {
				var distance = Math.floor(Math.random() * (max - min + 1) + min)
				return distance
			}
		}
	}
</script>

<style>
	html,body{

		width: 100%;

		height: 100%;

		position: absolute;

		left: 0;top: 0;

		overflow: hidden;

		overflow-y: hidden;

	}

	.shuli{/* margin:0 auto;
	width:20px;
	line-height:24px;
	border:1px solid #333;
	display:block; */
		writing-mode:vertical-rl;
	}
	.xinyuanbg{
		background-image:url(../../static/shurubg.png);
		width: 662rpx;
		height: 500rpx;
		border-radius: 20rpx;
	}
	.texttigs{

		background-color: #fff;
		font-size: 15px;
		color: #999;
		text-align: right;
		padding: 5px;

	}
	.jishi-head {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		color: #000;
		height: 49px;
		align-items: center;
		-webkit-justify-content: center;
		justify-content: center;



		color: #333;
		padding: 0 10px;
		box-sizing: border-box;
		padding-top: 10px;
		display: flex;
	}
	.jishi-head .left-back {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		background:rgba(0,0,0,.5);
		border-radius: 50%;
		height: 60rpx;
		width: 60rpx;
		align-items: center;
		-webkit-justify-content: center;
		justify-content: center;
		margin-left: 15rpx;
	}
	.jishi-head .left-back .back-icon {
		height: 38rpx;
		width: 38rpx;
		display: inline-block;
		margin-top: -1px;
		margin-left: 1px;
		background-size: 100% 100%;

	}
	.star {
		display: block;
		width: 1px;
		background: transparent;
		position: relative;
		opacity: 0;animation: star-fall 3s linear infinite;
		-webkit-animation: star-fall 3s linear infinite;
		-moz-animation: star-fall 3s linear infinite;
	}
	.star:after {
		content: '';
		display: block;
		border: 0px solid #fff;
		border-width: 0px 90px 2px 90px;
		border-color: transparent transparent transparent rgba(255, 255, 255, .5);
		box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
		/*变形*/
		transform: rotate(-45deg) translate3d(1px, 3px, 0);
		-webkit-transform: rotate(-45deg) translate3d(1px, 3px, 0);
		-moz-transform: rotate(-45deg) translate3d(1px, 3px, 0);
		transform-origin: 0% 100%;
		-webkit-transform-origin: 0% 100%;
		-moz-transform-origin: 0% 100%;
	}
	@keyframes star-fall {
		0% {
			opacity: 0;
			transform: scale(0.5) translate3d(0, 0, 0);
			-webkit-transform: scale(0.5) translate3d(0, 0, 0);
			-moz-transform: scale(0.5) translate3d(0, 0, 0);
		}
		50% {
			opacity: 1;
			transform: translate3d(-200px, 200px, 0);
			-webkit-transform: translate3d(-200px, 200px, 0);
			-moz-transform: translate3d(-200px, 200px, 0);
		}
		100% {
			opacity: 0;
			transform: scale(1.2) translate3d(-400px, 400px, 0);
			-webkit-transform: scale(1.2) translate3d(-400px, 400px, 0);
			-moz-transform: scale(1.2) translate3d(-400px, 400px, 0);
		}
	}

	.vertical-text {
		display: flex; /* 使用Flexbox布局 */
		align-items: center; /* 子项垂直居中 */
		justify-content: start; /* 子项水平居中 */
		flex-direction: column; /* 设置主轴方向为从上到下 */ /* 文字从上到下，从右到左排列 */
		height: 300rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		line-height: 1.2;
		/* 或者 */
		overflow-wrap: break-word; /* 新属性 */
	}
</style>